<template>
    <div>
        <div>
            ROOTA数据:{{roota}} {{isaOdd}}
            <button @click="adda(1)">add +1</button>
            <button @click="asyncAdda(3)">异步add+3</button>
        </div>
        <!-- <div>
            <h2>没有开启命名空间调用user模块</h2>
            <h3>{{$store.state.user.username}}
                昵称:{{$store.getters.nickname}}
                <button @click="$store.commit('change','王鸿')">同步修改名字</button>
                <button @click="$store.dispatch('asycnChange','关广兴')">异步修改名字</button>
            </h3>
        </div> -->
        <!-- <div>
            <h2>开启命名空间调用user模块</h2>
            <h3>{{$store.state.user.username}}
                昵称:{{$store.getters['user/nickname']}}
                <button @click="$store.commit('user/change','王鸿')">同步修改名字</button>
                <button @click="$store.dispatch('user/asycnChange','关广兴')">异步修改名字</button>
            </h3>
        </div> -->
        <div>
            <h2>开启命名空间调用user模块采用快捷函数映射</h2>
            <h3>{{username}}
                昵称:{{nickname}}
                <button @click="changeUsername('赵嘉鑫')">同步修改名字</button>
                <button @click="asyncChangeUser('周文华')">异步修改名字</button>
            </h3>
        </div>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';    
export default {
        computed:{
            // user.username(){//毛病
            //     return this.$store.user.username;
            // }
            ...mapState(["roota"]),
            ...mapGetters(["isaOdd"]),
            //开启命名空间的映射
            ...mapState({
                //username是组件的计算属性名称
                username:(state)=>state.user.username,
                // age:(state)=>state.user.age,
                // money:(state)=>state.user.money
            }),
            ...mapGetters({
                nickname:"user/nickname"
            })
            // username(){
            //     return this.$store.user.username;
            // },
            // age(){
            //     return this.$store.user.age;
            // },
        },
        methods:{
            ...mapMutations(["adda","user/change"]),
            ...mapMutations({
                changeUsername:"user/change"
            }),
            ...mapActions(["asyncAdda"]),
            ...mapActions({
                asyncChangeUser:"user/asycnChange"
            })
        },
        created(){
            console.log(this.$store);
        }
    }
</script>

<style lang="scss" scoped>

</style>